<template>
  <div>
    <input type="text" v-model="id" />
    <input type="text" v-model="name" />
    <button @click="addItem">add item</button>
  </div>
</template>

<script>
export default {
  name: "Item",
  data() {
    return {
      id: "",
      name: ""
    };
  },

  components: {},

  computed: {},

  beforeMount() {},

  mounted() {},

  methods: {
    addItem() {
      const obj = {};
      obj.id = this.id.trim();
      obj.name = this.name.trim();
      if (!obj.id) {
        return;
      }
      // 触发 分发事件
      this.$emit("getItem", obj);
      this.id = "";
      this.name = "";
    }
  },

  watch: {}
};
</script>
<style lang='' scoped>
</style>